<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/x-icon"
      href="https://jf.10086.cn/static/headicon.png"
    />
    <title>中国移动积分商城</title>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" href="../css/shouye.css" />
    <link rel="stylesheet" href="../css/lunbo.css" />
    <script src="../js/jquery.js"></script>
  </head>

  <body>
    <div id="app">
      <div>
        <!-- 顶部导航栏 -->
        <div id="top">
          <div class="container fx cl666">
            <div id="ccc">
              <span>您好，欢迎访问中国移动积分商城</span>
              <a href="./Login.html"
                ><span class="clRed ml30 pointer"> 请登录 </span></a
              >
            </div>
            <div id="ccc1" style="display: none">
              <span class="ml10">您好</span>
              <span></span>
              <span class="pointer ml10 clRed">退出</span>
            </div>
            <div class="topright fx">
              <div class="tab-top pointer tab-top1" style="display: none">
                我的账户
              </div>
              <div class="tab-top pointer tab-gouwu">购物车</div>
              <div class="tab-top">
                手机版
                <i class="icon iconfont icon-xiangxiajiantou"></i>
                <div class="hide-top" style="display: none">
                  <div class="app-code">
                    <img
                      src="https://jf.10086.cn/static/img/APPcode.4a1af6e.png"
                    />
                  </div>
                  <p>中国移动</p>
                  <p>手机营业厅</p>
                </div>
              </div>
              <div class="tab-top">
                客户服务
                <i class="icon iconfont icon-xiangxiajiantou"></i>
                <div class="hide-top" style="display: none">
                  <p class="top-menu">帮助中心</p>
                </div>
              </div>
              <div class="tab-top">
                网站导航
                <i class="icon iconfont icon-xiangxiajiantou"></i>
                <div class="hide-top" style="display: none">
                  <p class="top-menu">中国移动首页</p>
                  <p class="top-menu">移动商城</p>
                  <p class="top-menu">139邮箱</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 第二部分 -->
        <div class="h120" id="h120">
          <div class="searchbox">
            <div class="container fx">
              <!-- 开始logo -->
              <div class="logo">
                <a href="http://localhost:8080/html/shouye.html"><img src="	https://jf.10086.cn/static/img/logo.fccfc0f.png" alt="" style="width: 100%" /></a>
              </div>
              <!-- 中间部分 -->
              <div class="seabox">
                <div class="seaboxtop seaboxtop-input">
                  <!-- seaboxtop-input-right -->
                  <input
                    type="text"
                    autocomplete="off"
                    maxlength="15"
                    id="seabox"
                    class="seaboxinner"
                    value="你好"
                  />
                  <div class="seaboxtop-input-right">
                    <button class="seabtn">
                      <i class="icon1 iconfont icon-sousuo"></i>
                    </button>
                  </div>
                </div>
                <!-- 隐藏的ul,用于存放搜索接口的数据 -->
                <ul class="selectList"></ul>
                <!-- 热搜词，正常的应该是使用接口，输入后台传来的热搜数据 -->
                <div class="hots">
                  <span>热门搜索：</span>
                  <span class="hotitem">爱奇艺</span>
                  <span class="hotitem">腾讯</span>
                  <span class="hotitem">流量</span>
                  <span class="hotitem">蓝牙耳机</span>
                  <span class="hotitem">耳机</span>
                  <span class="hotitem">优酷</span>
                  <span class="hotitem">和平精英</span>
                </div>
              </div>
              <!-- 结束二维码 -->
              <div class="scan">
                <div class="scanCode">
                  <img
                    src="	https://jf.10086.cn/static/img/hejifen.ece7db2.jpg"
                    alt=""
                  />
                </div>
                <span class="mt8">积分商城微信公众号</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 第三部分 -->
        <div class="h40" id="h40">
          <div class="toptab">
            <div class="container fx">
              <div class="allclass">
                <img
                  src=""
                  alt=""
                  class="mulClass"
                />
                全部商品分类
              </div>
              <div class="menutab classA">我能兑换</div>
              <div class="menutab classA">品牌专区</div>
              <div class="menutab classA">乡村振兴</div>
              <div class="menutab classA">990包邮</div>
            </div>
          </div>
        </div>

        <!-- 第四部分  主体部分 ，主要进行接口的调用  -->

        <div class="" id="zhuti">
          <div class="homepage container">
            <!-- 工具栏 -->
            <div class="anchorlinkbox" style="display: none;">
              <div>
                <div class="anLink">我能兑换</div>
                <div class="grayline"></div>
              </div>
              <div>
                <div class="anLink">品牌专区</div>
                <div class="grayline"></div>
              </div>
              <div>
                <div class="anLink">乡村振兴</div>
                <div class="grayline"></div>
              </div>
              <div>
                <div class="anLink">990包邮</div>
                <div class="grayline"></div>
              </div>
              <div class="anLink totop clRed">
                <i class="iconfont icon-shangjiantou"></i> <br />顶部
              </div>
            </div>

            <!-- 导航栏 ，轮播图 -->
            <section class="homeheader fx">
              <!-- 左侧导航栏 -->
              <div class="category">
                <ul class="classbBox w200">
                  <li class="classbitem">
                    <span class="bname graycolor">话费流量</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">话费流量</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">流量包</span>
                          </section>
                          <section>
                            <span class="cName">流量加油包</span>
                          </section>
                          <section>
                            <span class="cName">短信包</span>
                          </section>
                          <section>
                            <span class="cName">彩信包</span>
                          </section>
                          <section>
                            <span class="cName">国漫流量包</span>
                          </section>
                          <section>
                            <span class="cName">任我看流量包</span>
                          </section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">休闲娱乐/商超/电商平台</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">休闲娱乐</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">游戏</span>
                          </section>
                          <section>
                            <span class="cName">视听</span>
                          </section>
                          <section>
                            <span class="cName">电子书</span>
                          </section>
                          <section>
                            <span class="cName">游戏权益</span>
                          </section>
                          <section>
                            <span class="cName">电影票</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">商超卖场</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">便利店</span>
                          </section>
                          <section>
                            <span class="cName">商超</span>
                          </section>
                          <section>
                            <span class="cName">行业卖场</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">电商平台</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">综合电商</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">自助终端</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">自助售货终端</span>
                          </section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">教育培训/生活服务</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">教育培训</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">学校教育</span>
                          </section>
                          <section>
                            <span class="cName">兴趣爱好</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">便民服务</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">公用事业缴费</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle"></span>
                        <div class="cItem">
                          <section>
                            <span class="cName">快递配送</span>
                          </section>
                          <section>
                            <span class="cName">快递配送</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">汽车服务</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">车主服务</span>
                          </section>
                          <section>
                            <span class="cName">洗车保养</span>
                          </section>
                          <section>
                            <span class="cName">违章代缴</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">健康服务</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">口腔护理</span>
                          </section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">餐饮/出行/健康/权益</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">餐饮</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">咖啡饮品</span>
                          </section>
                          <section>
                            <span class="cName">餐饮外卖平台</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">出行</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">在线约车</span>
                          </section>
                          <section>
                            <span class="cName">酒店服务</span>
                          </section>
                          <section>
                            <span class="cName">共享单车</span>
                          </section>
                          <section>
                            <span class="cName">贵宾厅服务</span>
                          </section>
                          <section>
                            <span class="cName">停车缴费</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">运动健康</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">运动场馆</span>
                          </section>
                          <section>
                            <span class="cName">休闲娱乐</span>
                          </section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">厨具/家居/水具/化妆</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">厨房用品</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">烹饪厨具</span>
                          </section>
                          <section>
                            <span class="cName">保鲜收纳</span>
                          </section>
                          <section>
                            <span class="cName">烹饪锅具</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">家居日用</span>
                        <div class="cItem">
                          <section><span class="cName">整理收纳</span></section>
                          <section><span class="cName">雨伞雨衣</span></section>
                          <section>
                            <span class="cName">洗晒/熨烫</span>
                          </section>
                          <section>
                            <span class="cName">家居日用其他</span>
                          </section>
                          <section>
                            <span class="cName">口罩/耳塞/眼罩</span>
                          </section>
                          <section>
                            <span class="cName">取暖/降温</span>
                          </section>
                          <section><span class="cName">清洁护理</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">水具酒具</span>
                        <div class="cItem">
                          <section><span class="cName">保温杯</span></section>
                          <section>
                            <span class="cName">保温壶/保温桶</span>
                          </section>
                          <section><span class="cName">茶具</span></section>
                          <section><span class="cName">水杯</span></section>
                          <section><span class="cName">酒具</span></section>
                          <section>
                            <span class="cName">水杯茶具酒具其他</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">家纺</span>
                        <div class="cItem">
                          <section><span class="cName">毛巾浴巾</span></section>
                          <section><span class="cName">床上用品</span></section>
                          <section><span class="cName">家纺其它</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">个护化妆</span>
                        <div class="cItem">
                          <section><span class="cName">面部护肤</span></section>
                          <section><span class="cName">卫生护理</span></section>
                          <section><span class="cName">男士护肤</span></section>
                          <section><span class="cName">口腔清洁</span></section>
                          <section><span class="cName">彩妆香水</span></section>
                          <section><span class="cName">身体护肤</span></section>
                          <section><span class="cName">洗发护发</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">家居软饰</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">挂钟/闹钟</span>
                          </section>
                          <section>
                            <span class="cName">家居软饰其他</span>
                          </section>
                          <section><span class="cName">地毯地垫</span></section>
                          <section>
                            <span class="cName">凉席/蚊帐</span>
                          </section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">厨房/个护/生活电器</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">厨房电器</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">电饼铛/煎烤机</span>
                          </section>
                          <section>
                            <span class="cName">榨汁机/料理机</span>
                          </section>
                          <section><span class="cName">电饭煲</span></section>
                          <section><span class="cName">煮蛋器</span></section>
                          <section><span class="cName">电磁炉</span></section>
                          <section><span class="cName">多用途锅</span></section>
                          <section><span class="cName">电热饭盒</span></section>
                          <section><span class="cName">酸奶机</span></section>
                          <section><span class="cName">压力锅</span></section>
                          <section><span class="cName">研磨机</span></section>
                          <section><span class="cName">面包机</span></section>
                          <section><span class="cName">豆浆机</span></section>
                          <section><span class="cName">微波炉</span></section>
                          <section>
                            <span class="cName">果蔬解毒机</span>
                          </section>
                          <section><span class="cName">咖啡机</span></section>
                          <section><span class="cName">电蒸锅</span></section>
                          <section>
                            <span class="cName">厨房电器其他</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">个护电器</span>
                        <div class="cItem">
                          <section><span class="cName">电吹风</span></section>
                          <section><span class="cName">理发器</span></section>
                          <section><span class="cName">成人用品</span></section>
                          <section>
                            <span class="cName">美容美发器</span>
                          </section>
                          <section>
                            <span class="cName">集优汇个护电器</span>
                          </section>
                          <section>
                            <span class="cName">个护电器其他</span>
                          </section>
                          <section>
                            <span class="cName">剃/脱毛器</span>
                          </section>
                          <section>
                            <span class="cName">口腔护理器</span>
                          </section>
                          <section><span class="cName">剃须刀</span></section>
                          <section><span class="cName">护理护具</span></section>
                          <section><span class="cName">生活保健</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">生活电器</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">挂烫机/熨斗</span>
                          </section>
                          <section><span class="cName">清洁净化</span></section>
                          <section>
                            <span class="cName">毛球修剪器</span>
                          </section>
                          <section><span class="cName">加湿器</span></section>
                          <section>
                            <span class="cName">集优汇生活电器</span>
                          </section>
                          <section><span class="cName">取暖制冷</span></section>
                          <section><span class="cName">饮水净水</span></section>
                          <section>
                            <span class="cName">除湿/干衣机</span>
                          </section>
                          <section><span class="cName">电话机</span></section>
                          <section><span class="cName">大家电</span></section>
                          <section><span class="cName">电水壶</span></section>
                          <section>
                            <span class="cName">生活电器其他</span>
                          </section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">数码电子/办公/智能生活</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">数码电子</span>
                        <div class="cItem">
                          <section><span class="cName">时尚影音</span></section>
                          <section><span class="cName">移动电源</span></section>
                          <section><span class="cName">手机配件</span></section>
                          <section>
                            <span class="cName">充电器/数据线</span>
                          </section>
                          <section><span class="cName">数码配件</span></section>
                          <section><span class="cName">电子教育</span></section>
                          <section><span class="cName">摄影摄像</span></section>
                          <section><span class="cName">手机</span></section>
                          <section>
                            <span class="cName">耳机/耳麦</span>
                          </section>
                          <section>
                            <span class="cName">数码电子其他</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">电脑办公</span>
                        <div class="cItem">
                          <section><span class="cName">U盘</span></section>
                          <section><span class="cName">外设产品</span></section>
                          <section><span class="cName">办公设备</span></section>
                          <section><span class="cName">网络设备</span></section>
                          <section><span class="cName">电脑配件</span></section>
                          <section><span class="cName">移动硬盘</span></section>
                          <section>
                            <span class="cName">文具/耗材</span>
                          </section>
                          <section><span class="cName">平板电脑</span></section>
                          <section>
                            <span class="cName">电脑办公其他</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">智能生活</span>
                        <div class="cItem">
                          <section><span class="cName">智能设备</span></section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">酒品茶饮/粮油/零食</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">酒品茶饮</span>
                        <div class="cItem">
                          <section><span class="cName">水/饮料</span></section>
                          <section><span class="cName">绿茶</span></section>
                          <section><span class="cName">蜂蜜</span></section>
                          <section><span class="cName">红茶</span></section>
                          <section><span class="cName">白酒</span></section>
                          <section><span class="cName">葡萄酒</span></section>
                          <section><span class="cName">啤酒</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">油粮干货</span>
                        <div class="cItem">
                          <section><span class="cName">干货</span></section>
                          <section><span class="cName">食用油</span></section>
                          <section><span class="cName">米面杂粮</span></section>
                          <section><span class="cName">方便食品</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">休闲零食</span>
                        <div class="cItem">
                          <section><span class="cName">枣</span></section>
                          <section><span class="cName">糕点</span></section>
                          <section><span class="cName">坚果</span></section>
                          <section><span class="cName">肉干</span></section>
                          <section><span class="cName">蜜饯果脯</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">营养品</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">传统滋补品</span>
                          </section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">鞋靴箱包/服饰/内衣</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">服饰鞋靴</span>
                        <div class="cItem">
                          <section><span class="cName">精品男包</span></section>
                          <section><span class="cName">潮流女包</span></section>
                          <section><span class="cName">时尚女鞋</span></section>
                          <section><span class="cName">功能箱包</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">服装配饰</span>
                        <div class="cItem">
                          <section><span class="cName">眼镜</span></section>
                          <section>
                            <span class="cName">围巾/帽子/手套</span>
                          </section>
                          <section>
                            <span class="cName">皮带/腰带</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">精品内衣</span>
                        <div class="cItem">
                          <section><span class="cName">男士内衣</span></section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">孕婴/汽车用品/运动健身</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">车床玩具</span>
                        <div class="cItem">
                          <section><span class="cName">儿童户外</span></section>
                          <section><span class="cName">车床出行</span></section>
                          <section><span class="cName">婴幼玩具</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">孕婴用品</span>
                        <div class="cItem">
                          <section><span class="cName">喂养用品</span></section>
                          <section><span class="cName">宝宝洗护</span></section>
                          <section><span class="cName">寝具服饰</span></section>
                          <section><span class="cName">日常护理</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">汽车用品</span>
                        <div class="cItem">
                          <section><span class="cName">汽车电子</span></section>
                          <section><span class="cName">汽车装饰</span></section>
                          <section><span class="cName">汽车安全</span></section>
                          <section><span class="cName">汽车养护</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">户外运动</span>
                        <div class="cItem">
                          <section><span class="cName">垂钓用品</span></section>
                          <section><span class="cName">骑行运动</span></section>
                          <section><span class="cName">户外鞋服</span></section>
                          <section><span class="cName">户外装备</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">体育健身</span>
                        <div class="cItem">
                          <section><span class="cName">体育用品</span></section>
                          <section><span class="cName">健身训练</span></section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">五金家装/家具灯具</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">五金家装</span>
                        <div class="cItem">
                          <section><span class="cName">厨卫装饰</span></section>
                          <section><span class="cName">五金电工</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">家具灯具</span>
                        <div class="cItem">
                          <section>
                            <span class="cName">生活小家具</span>
                          </section>
                          <section><span class="cName">灯饰照明</span></section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">手表/流行饰品/珠宝钻石</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">手表</span>
                        <div class="cItem">
                          <section><span class="cName">女士手表</span></section>
                          <section><span class="cName">情侣表</span></section>
                          <section><span class="cName">儿童手表</span></section>
                          <section><span class="cName">男士手表</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">流行饰品</span>
                        <div class="cItem">
                          <section><span class="cName">水晶玛瑙</span></section>
                          <section><span class="cName">天然木饰</span></section>
                          <section><span class="cName">合金饰品</span></section>
                          <section>
                            <span class="cName">其它材质饰品</span>
                          </section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">珠宝钻石</span>
                        <div class="cItem">
                          <section><span class="cName">翡翠饰品</span></section>
                          <section><span class="cName">玉器饰品</span></section>
                          <section><span class="cName">铂金饰品</span></section>
                          <section><span class="cName">珍珠饰品</span></section>
                          <section>
                            <span class="cName">天然玉石饰品</span>
                          </section>
                          <section><span class="cName">黄金饰品</span></section>
                          <section><span class="cName">钻石首饰</span></section>
                        </div>
                      </div>
                      <div>
                        <span class="ctitle">银饰品</span>
                        <div class="cItem">
                          <section><span class="cName">耳饰</span></section>
                          <section>
                            <span class="cName">项链/吊坠</span>
                          </section>
                          <section>
                            <span class="cName">手链/手镯/脚链</span>
                          </section>
                          <section><span class="cName">戒指</span></section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor"
                      >苏宁极物/小米有品/网易严选</span
                    >
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">外部电商</span>
                        <div class="cItem">
                          <section><span class="cName">苏宁极物</span></section>
                          <section><span class="cName">小米有品</span></section>
                          <section><span class="cName">网易严选</span></section>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="classbitem">
                    <span class="bname graycolor">金融积分/电商积分</span>
                    <div class="classCBox" style="display: none">
                      <div>
                        <span class="ctitle">积分互换</span>
                        <div class="cItem">
                          <section><span class="cName">金融积分</span></section>
                          <section><span class="cName">电商积分</span></section>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 轮播图区域 -->
              <section id="lunbo">
                <div class="swiper mySwiper" id="dalunbo">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/202104/6065b6fe978bf7066201d6ca.png"
                        alt=""
                      />
                    </div>
                    <div class="swiper-slide">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/202112/61ad6e14a1a9ff755cefa5ee.jpg"
                        alt=""
                      />
                    </div>
                    <div class="swiper-slide">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/202106/60c16fa9a1a9ff755ce19987.jpg"
                        alt=""
                      />
                    </div>
                  </div>
                  <div class="swiper-button-prev">
                    <i
                      class="iconfont icon-youjiantou"
                      style="color: aliceblue; font-size: 16px"
                    ></i>
                  </div>
                  <div class="swiper-button-next">
                    <i
                      class="iconfont icon-zuojiantou"
                      style="color: aliceblue; font-size: 16px"
                    ></i>
                  </div>

                  <div class="swiper-pagination"></div>
                </div>

                <div class="headerTemp">
                  <div class="div2 fx">
                    <img
                      src="	https://jf.10086.cn/asset/pic/topic/202009/5f72d03b45af596d7c48d20f.png"
                      alt=""
                    />
                    <img
                      src="	https://jf.10086.cn/asset/pic/topic/202106/60dc25b6a1a9ff755ce3ce19.png"
                      alt=""
                    />
                  </div>
                </div>
              </section>

              <!-- 右侧登录显示区 -->
              <div class="loginbox">
                <div id="login" class="bgf">
                  <!--登录按钮  -->
                  <section class="defaultHeader header fx">
                    <div class="header-pic fx">
                      <img
                        src=""
                        alt=""
                      />
                      <p class="text-m dl logText">
                        欢迎访问<br />
                        中国移动积分商城
                      </p>
                    </div>
                    <a href="./Login.html"
                      ><button class="loginbtn bgRed">登录</button></a
                    >
                  </section>
                  <section
                    class="header pointer logheader"
                    style="display: none"
                  >
                    <div>
                      <div class="header-pic fx">
                        <img
                          src=""
                          alt=""
                        />
                        <div class="userLevel dl">
                          <span class="phoneNum fw"></span>
                          <p class="userAge">网龄：1年</p>
                        </div>
                      </div>
                      <div class="multiScore">
                        我的积分回馈系数：1倍
                        <i></i>
                      </div>
                      <div class="scoresAvout text-r">
                        <p class="font12">
                          <span class="clRed"></span><span>总积分：1000</span>
                        </p>
                        <p class="cl999 font10">可用1000和积分<br />商城积分</p>
                      </div>
                    </div>
                  </section>
                  <div class="splitLine"></div>
                  <!-- 第二部分公告栏 -->
                  <section class="announceList">
                    <div class="announceTitle fx">
                      <span class="font15">商城公告</span>
                      <a href="#"
                        ><span class="font12 cl999 pointer"
                          >更多 <i class="iconfont icon-youjiantou"></i></span
                      ></a>
                    </div>
                    <div class="scroll">
                      <div class="scrollContainer">
                        <div class="swiper mySwiper" id="gonggao">
                          <div class="swiper-wrapper">
                            <div class="swiper-slide">
                              <p class="t444">积分商城合同到期商户退出公示</p>
                            </div>
                            <div class="swiper-slide">
                              <p class="t444">
                                南基池外B域核心扩容及版本升级操作
                              </p>
                            </div>
                            <div class="swiper-slide">
                              <p class="t444">
                                关于部分省份积分兑换业务延迟上线的公告
                              </p>
                            </div>
                            <div class="swiper-slide">
                              <p class="t444">中国移动积分计划全新升级的公告</p>
                            </div>
                            <div class="swiper-slide">
                              <p class="t444">
                                关于近期实物类礼品配送延迟的公告
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>

                  <div class="splitLine"></div>
                  <!-- 第三部分 图标栏 -->
                  <section class="loginBtnList fx">
                    <div class="loginBtns text_m">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/5ea25f/6/5ea25f64347439236be423fc.png"
                      />
                      <p class="font12">商超</p>
                    </div>
                    <div class="loginBtns text_m">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/5ea25f/5/5ea25f57347439236be423fb.png"
                      />
                      <p class="font12">便利店</p>
                    </div>
                    <div class="loginBtns text_m">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/5ea2e4/9/5ea2e499347439236be4277f.png"
                      />
                      <p class="font12">电子书</p>
                    </div>
                    <div class="loginBtns text_m">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/5ea924/1/5ea92414ac88be0799f7868c.png"
                      />
                      <p class="font12">综合</p>
                    </div>
                    <div class="loginBtns text_m">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/5ea924/4/5ea9244fac88be0799f7868d.png"
                      />
                      <p class="font12">快餐</p>
                    </div>
                    <div class="loginBtns text_m">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/5ea924/e/5ea924eaac88be0799f7868f.png"
                      />
                      <p class="font12">视听</p>
                    </div>
                  </section>
                  <div class="splitLine"></div>
                  <!-- 底部 积分兑换 -->
                  <section class="recharge">
                    <div class="rechargeTitle fx">
                      <div class="text_m text_m1">
                        <img
                          src=""
                        />
                        <p class="">话费兑换</p>
                      </div>
                      <div class="text_m text_m2">
                        <img
                          src=""
                        />
                        <p class="cl999">流量兑换</p>
                      </div>
                    </div>
                    <div class="rechargeContent">
                      <div>
                        <div class="tabList fx">
                          <div class="phoneTab normTab">5元</div>
                          <div class="phoneTab normTab">10元</div>
                          <div class="phoneTab normTab">20元</div>
                          <div class="phoneTab normTab">30元</div>
                        </div>
                        <div class="navInput">
                          <span class="moneyGray money">￥</span>
                          <input
                            type="text"
                            placeholder="5-50元，最高50元"
                            maxlength="3"
                          />
                          <span class="usePoint">
                            使用
                            <span class="mmmm">0</span> 积分
                          </span>
                          <span class="overLimit" style="display: none">
                            请输入5-50的整数
                          </span>
                        </div>
                        <button class="promptly phoneBtn">
                          立即兑换
                          <div class="innerpromptly"></div>
                        </button>
                      </div>
                    </div>
                    <div class="rechargeContent1" style="display: none">
                      <div>
                        <div class="tabList fx">
                          <div class="flowTab">100M</div>
                          <div class="flowTab">450M</div>
                          <div class="flowTab">1500M</div>
                          <div class="flowTab">420M</div>
                          <div class="flowTab">900M</div>
                          <div class="flowTab">3000M</div>
                        </div>
                        <button class="promptly flowBtn">
                          立即兑换
                          <div class="innerpromptly"></div>
                        </button>
                      </div>
                    </div>
                  </section>
                  <section class="dialog"></section>
                </div>
              </div>
            </section>

            <!-- 中间部分 -->
            <section class="subsecBox fx bgf">
              <div class="innersubsecBox_t">分值浏览</div>
              <div class="innersubsecBox">0-1000</div>
              <div class="innersubsecBox">1000-2000</div>
              <div class="innersubsecBox">2000-3000</div>
              <div class="innersubsecBox">3000-5000</div>
              <div class="innersubsecBox">5000-10000</div>
              <div class="innersubsecBox">10000-20000</div>
              <div class="innersubsecBox">20000以上</div>
            </section>

            <!-- 数据展示 -->
            <section class="flextemplate">
              <!-- 第一张长图 -->
              <div class="templates">
                <div class="template_ad_1 fx M203">
                  <img
                    src="https://jf.10086.cn/asset/pic/topic/202104/607958c1978bf70662030657.png"
                    class="shadowHover"
                  />
                </div>
              </div>

              <!-- 活动专区 -->
              <div class="templates">
                <div class="template_active M211">
                  <p class="font26 tTitle">活动专区</p>
                  <div class="fx">
                    <img
                      src="https://jf.10086.cn/asset/pic/topic/202109/614d88f0a1a9ff755ceac822.png"
                      class="shadowHover"
                    /><img
                      src="https://jf.10086.cn/asset/pic/topic/202104/60866f39a1a9ff755cde4fca.png"
                      class="shadowHover"
                    />
                  </div>
                </div>
              </div>

              <!-- 第二张长图 -->
              <div class="templates">
                <div class="template_ad_1 fx M203">
                  <img
                    src="https://jf.10086.cn/asset/pic/topic/202110/617a12eda1a9ff755ced082d.jpg"
                    class="shadowHover"
                  />
                </div>
              </div>

              <!--  品牌旗舰店  大型轮播图  调接口展示数据-->
              <div class="templates">
                <div class="template_brand M201">
                  <p class="font26 tTitle">品牌旗舰店</p>
                  <!-- 轮播区域 -->

                  <div class="swiper mySwiper" id="dalunbo">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div class="biglunbo">
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div class="biglunbo">
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                          <div class="dadada"><img src="" alt="" /></div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-pagination"></div>
                  </div>
                </div>
              </div>
              <!-- 频道专区 -->

              <div class="templates">
                <div class="template_channel M212">
                  <p class="font26 tTitle">频道专区</p>
                  <div class="fx">
                    <div class="channel_content_outer">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/202009/5f72d49345af596d7c48d371.png"
                        class="channel_bgImg"
                      />
                      <div class="channel_content fx">
                        <div class="channel_content_inner shadowHover">
                          <img
                            src="https://jf.10086.cn/asset/pic/topic/202009/5f72d4aa45af596d7c48d377.png"
                          />
                          <p class="text_m font18 beyond_ellipsis1">彩信包</p>
                        </div>
                        <div class="channel_content_inner shadowHover">
                          <img
                            src="https://jf.10086.cn/asset/pic/topic/202009/5f72d4fb45af596d7c48d3a2.png"
                          />
                          <p class="text_m font18 beyond_ellipsis1">
                            流量加油包
                          </p>
                        </div>
                        <div class="channel_content_inner shadowHover">
                          <img
                            src="https://jf.10086.cn/asset/pic/topic/202009/5f72d64a45af596d7c48d414.png"
                          />
                          <p class="text_m font18 beyond_ellipsis1">
                            任我看定向流量包
                          </p>
                        </div>
                      </div>
                    </div>
                    <div class="channel_content_outer">
                      <img
                        src="https://jf.10086.cn/asset/pic/topic/202009/5f72d83f45af596d7c48d490.png"
                        class="channel_bgImg"
                      />
                      <div class="channel_content fx">
                        <div class="channel_content_inner shadowHover">
                          <img
                            src="https://jf.10086.cn/asset/pic/topic/202009/5f72d99e45af596d7c48d500.png"
                          />
                          <p class="text_m font18 beyond_ellipsis1">
                            平安万里通
                          </p>
                        </div>
                        <div class="channel_content_inner shadowHover">
                          <img
                            src="https://jf.10086.cn/asset/pic/topic/202009/5f72d96645af596d7c48d4ea.png"
                          />
                          <p class="text_m font18 beyond_ellipsis1">华润通</p>
                        </div>
                        <div class="channel_content_inner shadowHover">
                          <img
                            src="https://jf.10086.cn/asset/pic/topic/202109/6140565aa1a9ff755cea0d64.png"
                          />
                          <p class="text_m font18 beyond_ellipsis1">敬请期待</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 商品列表区 -->

              <div id="dataList">
                <div class="template_recommand">
                  <!-- 列表标题 -->
                  <div class="libiaotitle fix_title">
                    <div class="recommand_title">
                      <div class="title_list fx">
                        <p class="select_title"><span>精选</span></p>
                        <p class=""><span>积分+现金</span></p>
                        <p class=""><span>新品</span></p>
                      </div>
                    </div>
                  </div>

                  <!--  列表页面 -->
                  <div class="liebiao fx">
                  <!--<div class="zzz bgf shadowHover">
                      <img
                        src="https://jf.10086.cn/asset/pic/ware/202111/619ca806a1a9ff755ceee02f.jpg"
                        alt=""
                      />
                      <p class="pprice font24 clRed"><span class="font12">积分</span></p>
                      <p class="pdecs">11</p>
                    </div> -->
                   
              </div>
            </section>
          </div>
        </div>

        <!-- 底部 -->
        <div class="allfooter">
          <section class="footsection fx">
            <div class="footbox">
              <p class="footp1 fx">
                <i class="icon iconfont icon-exchange"></i>
                <span>新手上路</span>
              </p>
              <p class="footp2">
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >客服密码</a
                  ></span
                >
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >兑换流程</a
                  ></span
                >
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >中国移动手机营业厅</a
                  ></span
                >
              </p>
            </div>
            <div class="footbox">
              <p class="footp1 fx">
                <i class="icon iconfont icon-truck"></i>
                <span>配送方式</span>
              </p>
              <p class="footp2">
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >送货上门</a
                  ></span
                >
              </p>
            </div>
            <div class="footbox">
              <p class="footp1 fx">
                <i class="icon iconfont icon-shouhou"></i>
                <span>售后服务</span>
              </p>
              <p class="footp2">
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >退换货政策</a
                  ></span
                >
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >礼品三包</a
                  ></span
                >
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >查看订单</a
                  ></span
                >
              </p>
            </div>
            <div class="footbox">
              <p class="footp1 fx">
                <i class="icon iconfont icon-jifen"></i>
                <span>积分计划</span>
              </p>
              <p class="footp2">
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >中国移动积分计划</a
                  ></span
                >
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >常见问题</a
                  ></span
                >
              </p>
            </div>
            <div class="footbox">
              <p class="footp1 fx">
                <i class="icon iconfont icon-dianhua"></i>
                <span>客服电话</span>
              </p>
              <p class="footp2">
                <span class="footpp">7x24小时热线</span>
                <span class="footpp ll">10086</span>
              </p>
            </div>
            <div class="footbox">
              <p class="footp1 fx">
                <i class="icon iconfont icon-gonggaoliebiao"></i>
                <span>招商公告</span>
              </p>
              <p class="footp2">
                <span class="footpp"
                  ><a href="http://www.10086.cn/support/bj/" class="pointer"
                    >招商公告</a
                  ></span
                >
                <span class="footpp"></span>
              </p>
            </div>
          </section>

          <footer class="footlinkBox">
            <span class="footlink">
              <img
                src=""
                class="footimg"
              />
              <a href="http://www.10086.cn/web_notice/contact/" class="pointer"
                >联系我们</a
              >
            </span>

            <span class="footlink">
              <a href="http://www.10086.cn/support/bj/" class="pointer"
                >帮助信息</a
              >
            </span>
            <span class="footlink">
              <a href="#">京ICP备05002571号</a>
            </span>
            <span class="footlink">中国移动通信版权所有</span>
            <span class="footlink" style="border-right: none">
              <a href="#" class="pointer">证照信息</a>
            </span>
          </footer>
        </div>
      </div>
    </div>

    <script src="../js/lunbo.js"></script>
    <script src="../js/top.js"></script>

    <script>
      var swiper = new Swiper("#dalunbo", {
        spaceBetween: 30, // 间距
        slidesPerGroup: 1, //一次换一个
        loop: true, //
        // centeredSlides: true,
        autoplay: {
          //动画
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          //
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-prev",
          prevEl: ".swiper-button-next",
        },
      });
    </script>
    <script>
      var swiper = new Swiper("#gonggao", {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        loop: true,
        autoplay: {
          //动画
          delay: 2500,
          disableOnInteraction: false,
        },
      });
    </script>
    <script>
      var swiper = new Swiper("#dalunbo", {
        spaceBetween: 30, // 间距
        slidesPerGroup: 1, //一次换一个
        loop: true, //
        centeredSlides: true,
        autoplay: {
          //动画
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          //
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>

   
  </body>
</html>
